<template>
  <div class="edit_password">
    <headTop :headClass="'white_header'">{{type === 1 ? 'Modify login password' : 'Modify transaction password'}}</headTop>
    <div class="infomation">
      <div class="info">
        <span>Cell-phone number</span>
        <span>{{phone ? HidePhone(phone) : phone}}</span>
      </div>
      <div class="info send_code">
        <label for="verify" class="verify">
          <span>Code</span>
          <input type="number" id="verify" placeholder="Please enter SMS verification code" v-model="verify">
        </label>
        <span :class="{'no_send' : !isSend, 'is_send' : isSend}" @click="sendCode">{{sendText}}</span>
      </div>
      <label class="info">
        <span>{{type === 1 ? 'login password' : 'transaction password'}}</span>
        <input type="password" placeholder="Please set up a new login password" v-model="loginPwd" v-if="type === 1">
        <input type="password" placeholder="set up a new transaction password" v-model="payPwd" v-if="type === 2">
      </label>
      <label class="info">
        <span>Confirm password</span>
        <input type="password" placeholder="Please reconfirm login password" v-model="reloginPwd" v-if="type === 1">
        <input type="password" placeholder="confirm the transaction password" v-model="repayPwd" v-if="type === 2">
      </label>
    </div>
    <div class="confirm">
      <span class="public_btn" @click="submit">Sure</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'editPassword',
  data () {
    return {
      type: parseFloat(this.$route.query.type),
      verify: '',
      sendText: 'Get code',
      isSend: false,
      codeTime: 60,
      loginPwd: '',
      payPwd: '',
      reloginPwd: '',
      repayPwd: ''
    };
  },
  props: [
    'phone'
  ],
  methods: {
    // Submission binding
    submit () {
      if (this.type === 1) {
        if (!this.verify) {
          this.Toast('Please input verification code.');
        } else if (!this.loginPwd) {
          this.Toast('Please enter a new login password.');
        } else if (this.loginPwd.length < 6) {
          this.Toast('Please enter6-16Login password');
        } else if (!this.reloginPwd) {
          this.Toast('Please reconfirm login password.');
        } else if (this.loginPwd !== this.reloginPwd) {
          this.Toast('Two password inconsistency');
        } else {
          this.loginSubmit();
        }
      } else {
        if (!this.verify) {
          this.Toast('Please input verification code.');
        } else if (!this.payPwd) {
          this.Toast('Please enter a new transaction password.');
        } else if (!/^[0-9]{6}$/.test(this.payPwd)) {
          this.Toast('Please enter6Bit pure digital transaction password');
        } else if (!this.repayPwd) {
          this.Toast('Please confirm the transaction password again.');
        } else if (this.payPwd !== this.repayPwd) {
          this.Toast('Two password inconsistency');
        } else {
          this.paySubmit();
        }
      }
    },
    // Send verification code
    sendCode () {
      if (this.isSend) {
        return false;
      } else {
        this.getCode();
      }
    },
    // Count down
    timer () {
      if (this.codeTime > 0) {
        this.codeTime--;
        this.sendText = `(${this.codeTime})s`;
        setTimeout(this.timer, 1000);
      } else {
        this.codeTime = 60;
        this.sendText = 'Recapture';
        this.isSend = false;
      }
    },
    // Modify login password submit
    loginSubmit () {
      this.axios.post('index/users/loginReset', {
        code: this.verify,
        pass: this.loginPwd,
        repass: this.reloginPwd
      }).then(({data}) => {
        if (data.status === 200) {
          this.Modal('Re logged in', 'Login password has been modified successfully. Please login again.', 'Re logged in', () => {
            this.logOut();
          });
        } else {
          this.Toast(data.message);
        }
      });
    },
    // Modify transaction password submit
    paySubmit () {
      this.axios.post('index/users/payReset', {
        code: this.verify,
        pass: this.payPwd,
        repass: this.repayPwd
      }).then(({data}) => {
        if (data.status === 200) {
          this.Toast('Transaction password has been modified successfully.');
          this.$router.go(-1);
        } else {
          this.Toast(data.message);
        }
      });
    },
    // Logout interface
    logOut () {
      this.axios.get('index/auth/quit').then(({data}) => {
        if (data.status === 200) {
          this.$router.push('login');
        } else {
          this.Toast(data.message);
        }
      });
    },
    // Sending verification code request
    getCode () {
      this.axios.post('index/sms/send', {
        phone: this.phone,
        type: this.type === 1 ? 4 : 5
      }).then(({data}) => {
        if (data.status === 200) {
          this.isSend = true;
          this.timer();
        } else {
          this.Toast(data.message);
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
  @import '../style/mixin.scss';
  .edit_password{
    padding-top: 108px;
    background-color: #fff;
    .white_header{
      white-space: nowrap;
    }
    .infomation{
      width: 100%;
      padding: 0 30px;
      position: relative;
      margin-bottom: 100px;
      .info{
        width: 100%;
        height: 108px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #e6e6e6;
        font-size: 28px;
        color: #282828;
        input{
          flex: 1;
          height: 100%;
          font-size: 26px;
          color: #282828;
          text-align: right;
          &:placeholder{
            font-size: 26px;
            color: #999;
          }
        }
        &.send_code{
          .verify{
            width: 76%;
            height: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            input{
              flex: 1;
              height: 100%;
            }
          }
          >span{
            width: 24%;
            font-size: 26px;
            color: $color;
            text-align: right;
            &.is_send{
              color: #666;
            }
          }
        }
        &:nth-last-child(1){
          margin-bottom: 0;
        }
      }
      &::before{
        display: block;
        content: '';
        width: 100%;
        height: 20px;
        background-color: #f5f5f5;
        position: absolute;
        left: 0;
        top: -20px;
      }
    }
    .confirm{
      width: 100%;
      text-align: center;
    }
  }
</style>
